/* * @Author: Yejing * @Date: 2023-06-10 10:31:18 * @LastEditors: Yejing * @LastEditTime: 2023-06-10 10:31:18 *
@Description: desc */
<template>
	<view class="modify-page">
		<!-- 头部 -->
		<c-layout>
			<c-navigation-bar :title="search.title" :navType="search.navType" :navPlaceholder="search.navPlaceholder"
				:navThmen="search.navThmen" @focusEvent="focusEvent" @switchSvgEvent="switchSvgEvent"></c-navigation-bar>

			<view class="function-box">
				<view class="custom-style" @click="changeactive1(0)" :class="active1 === 0 ? 'active' : ''">
					{{$t('storeManagement.OrderNum')}}
				</view>
				<view class="custom-style" @click="changeactive1(1)" :class="active1 === 1 ? 'active' : ''">
					{{$t('storeManagement.TaskNum')}}
				</view>
				<view class="custom-style" @click="changeactive1(2)" :class="active1 === 2? 'active' : ''">
					{{$t('storeManagement.GoodsNum')}}
				</view>
				<view class="custom-style" @click="changeactive1(3)" :class="active1 === 3 ? 'active' : ''">
					{{$t('storeManagement.ConversionRate')}}
				</view>
			</view>
			
			<!-- ucharts -->
			<view class="charts-box">
				<canvas canvas-id="NkCVjWoUPAMZMRIayjbyAOTJEuVkBZUE" id="NkCVjWoUPAMZMRIayjbyAOTJEuVkBZUE" class="charts"
					@touchend="tap" width="100%" height="550rpx" />
				<!-- <canvas canvas-id="fIRulJYJkyluZdpCZYjspYEuwKeJLxJD" id="fIRulJYJkyluZdpCZYjspYEuwKeJLxJD"
					class="charts" @touchend="tap" width="100%" height="550rpx" /> -->
			</view>
			<view class="" style="text-align: center;">
			
				{{publicJS.timeZoneSwitching(Date.now(),'DD-MM-yyyy')}}
			</view>
			
			
			
			<!-- 修改 -->
			<view class="container-box form-modify">
				<u-collapse :item-style="itemStyle" :head-style="headStyle" arrow-color="#02010E">
					<u-collapse-item v-for="(item, index) in itemList" :key="index" >
						<template slot="title">
							<view class="collapseHead">
								<view class="collapseName">
									{{ item.head }}
								</view>
								<!-- <view class="collapseType">
								{{item.type?'Completed':'No Completed'}}
							</view> -->
							</view>
						</template>
						<view class="collapseContent" v-if="index == 0">
							<view class="" style="margin: 30rpx 0">{{$t('storeManagement.SalesVolume')}}</view>
							<view class="dataIndicatorBox">
								<view class="dataIndicator" style="background: linear-gradient(90deg, #6d0bbd 0%, #445ff5 100%)">
									<view class="dataIndicatorNum">${{ itemList[0].num.dailySales }}</view>
									<view class="dataIndicatorName">{{$t('storeManagement.Daily')}}</view>
								</view>
								<view class="dataIndicator" style="background: linear-gradient(90deg, #ffa66a 0%, #fd4848 100%)">
									<view class="dataIndicatorNum">${{ itemList[0].num.weeklySales }}</view>
									<view class="dataIndicatorName">{{$t('storeManagement.Weekly')}}</view>
								</view>
								<view class="dataIndicator" style="background: linear-gradient(90deg, #a2ec56 0%, #1fefbd 100%)">
									<view class="dataIndicatorNum">${{ itemList[0].num.monthlySales }}</view>
									<view class="dataIndicatorName">{{$t('storeManagement.Monthly')}}</view>
								</view>
							</view>
							<view class="" style="margin: 30rpx 0">{{$t('storeManagement.SalesGrowthRate')}}</view>
							<view class="statisticsBox">
								<view class="statistics">
									<view class="statisticsIcon">
										<view class="">
											<u-icon name="file-text-fill" color="#2979ff" size="48"></u-icon>
											{{$t('storeManagement.Weekly')}}
										</view>
									</view>
									<view class="statisticsNum">{{ itemList[0].num.weeklyGrowthRate }}%</view>
									<!-- <view class="statisticsName">Sales growth rate</view> -->
								</view>
								<view class="statistics">
									<view class="statisticsIcon">
										<view class="">
											<u-icon name="order" color="#2979ff" size="48"></u-icon>
											{{$t('storeManagement.Monthly')}}
										</view>
									</view>
									<view class="statisticsNum">{{ itemList[0].num.monthlyGrowthRate }}%</view>
									<!-- <view class="statisticsName">Sales growth rate</view> -->
								</view>
							</view>

							<!-- <view class="">logistics</view> -->
							<view class="logisticsBox">
								<view class="logisticsBoxLfet">
									<u-image :src="imgUrl1" width="88rpx" height="88rpx"></u-image>
									<view class="logisticsBoxLfet_right">
										<view class="logisticsBoxLfet_right_title">{{$t('storeManagement.TotalSalesAmount')}}</view>
										<!-- <view class="">
											{{ item.time }}
										</view> -->
									</view>
								</view>
								<view class="logisticsBoxRight">${{itemList[0].num.totalSales}}</view>
							</view>
							<view class="logisticsBox">
								<view class="logisticsBoxLfet">
									<u-image :src="imgUrl2" width="88rpx" height="88rpx"></u-image>
									<view class="logisticsBoxLfet_right">
										<view class="logisticsBoxLfet_right_title">{{$t('storeManagement.TotalOrderQuantity')}}</view>
										<!-- 	<view class="">
											{{ item.time }}
										</view> -->
									</view>
								</view>
								<view class="logisticsBoxRight" style="color: red">{{itemList[0].num.totalOrders}}</view>
							</view>
							<!-- 	<view class="">
							Number of returned goods
						</view>
						<view class="logisticsBox">
							<view class="logisticsBoxLfet">
								<u-image :src="imgUrl3" width="88rpx"  height="88rpx"></u-image>
								<view class="logisticsBoxLfet_right">
									<view class="logisticsBoxLfet_right_title">
										Settled
									</view>
									<view class="">
										{{item.time}}
									</view>
								</view>
							</view>
							<view class="logisticsBoxRight">
								$275,85
							</view>
						</view>
						<view class="logisticsBox">
							<view class="logisticsBoxLfet">
								<u-image :src="imgUrl4" width="88rpx"  height="88rpx"></u-image>
								<view class="logisticsBoxLfet_right">
									<view class="logisticsBoxLfet_right_title">
										Unsettled
									</view>
									<view class="">
										{{item.time}}
									</view>
								</view>
							</view>
							<view class="logisticsBoxRight" style="color: red;">
								$73,48
							</view>
						</view> -->
						</view>
						<view class="collapseContent" v-else-if="index == 1">
							<view class="" style="margin: 30rpx 0">{{$t('storeManagement.ActiveUsers')}}</view>
							<view class="dataIndicatorBox">
								<view class="dataIndicator" style="background: linear-gradient(90deg, #6d0bbd 0%, #445ff5 100%)">
									<view class="dataIndicatorNum">{{ itemList[1].num.dayUser }}</view>
									<view class="dataIndicatorName">{{$t('storeManagement.Daily')}}</view>
								</view>
								<view class="dataIndicator" style="background: linear-gradient(90deg, #ffa66a 0%, #fd4848 100%)">
									<view class="dataIndicatorNum">{{ itemList[1].num.weekUser }}</view>
									<view class="dataIndicatorName">{{$t('storeManagement.Weekly')}}</view>
								</view>
								<view class="dataIndicator" style="background: linear-gradient(90deg, #a2ec56 0%, #1fefbd 100%)">
									<view class="dataIndicatorNum">{{ item.num.mouthUser }}</view>
									<view class="dataIndicatorName">{{$t('storeManagement.Monthly')}}</view>
								</view>
							</view>

							<view class="logisticsBox">
								<view class="logisticsBoxLfet">
									<u-image :src="imgUrl3" width="88rpx" height="88rpx"></u-image>
									<view class="logisticsBoxLfet_right">
										<view class="logisticsBoxLfet_right_title">
											<view class="">{{$t('storeManagement.AveragePurchase')}}</view>
											<view class="">{{$t('storeManagement.AmountPerPurchase')}}</view>
										</view>
									</view>
								</view>
								<view class="logisticsBoxRight">${{itemList[1].num.apa}}</view>
							</view>
							<view class="logisticsBox">
								<view class="logisticsBoxLfet">
									<u-image :src="imgUrl4" width="88rpx" height="88rpx"></u-image>
									<view class="logisticsBoxLfet_right">
										<view class="logisticsBoxLfet_right_title">{{$t('storeManagement.RepurchaseRate')}}</view>
									</view>
								</view>
								<view class="logisticsBoxRight" style="color: red">{{itemList[1].num.repeatRate}}%</view>
							</view>
						</view>

						<view class="collapseContent" v-else>
							<view class="" style="margin: 30rpx 0">{{$t('storeManagement.ProcurementFrequency')}}</view>
							<view class="dataIndicatorBox">

								<view class="dataIndicator" style="background: linear-gradient(90deg, #ffa66a 0%, #fd4848 100%)">
									<view class="dataIndicatorNum">{{ itemList[2].num.weeklyPurchase }}</view>
									<view class="dataIndicatorName">{{$t('storeManagement.Weekly')}}</view>
								</view>
								<view class="dataIndicator" style="background: linear-gradient(90deg, #a2ec56 0%, #1fefbd 100%)">
									<view class="dataIndicatorNum">{{ itemList[2].num.monthlyPurchase}}</view>
									<view class="dataIndicatorName">{{$t('storeManagement.Monthly')}}</view>
								</view>
							</view>
							<view class="logisticsBox">
								<view class="logisticsBoxLfet">
									<u-image :src="imgUrl1" width="88rpx" height="88rpx"></u-image>
									<view class="logisticsBoxLfet_right">
										<view class="">{{$t('storeManagement.AveragePurchase')}}</view>
										<view class="">{{$t('storeManagement.quantityPerOrder')}}</view>
									</view>
								</view>
								<view class="logisticsBoxRight">{{ itemList[2].num.averagePurchaseQuantity }}</view>
							</view>
							<view class="logisticsBox">
								<view class="logisticsBoxLfet">
									<u-image :src="imgUrl2" width="88rpx" height="88rpx"></u-image>
									<view class="logisticsBoxLfet_right">
										<view class="">{{$t('storeManagement.AveragePurchase')}}</view>
										<view class="">{{$t('storeManagement.typePerOrder')}}</view>
									</view>
								</view>
								<view class="logisticsBoxRight" style="color: red">{{ `${itemList[2].num.purchaseCategories} ${$t('storeManagement.seed')}`}}</view>
							</view>
						</view>
					</u-collapse-item>
				</u-collapse>
			</view>
		</c-layout>

		<view class="bootom"></view>
	</view>
</template>

<script>
	import uCharts from '@/uni_modules/qiun-data-charts/js_sdk/u-charts/u-charts.js';
	import bubble from "@/components/bubble.vue"
	const modal = uni.requireNativePlugin('modal');
	const pluginMobShare = uni.requireNativePlugin('mob-sharesdk');
	var uChartsInstance = {};
	export default {
		data() {
			return {
				active1: 0,
				totalBalance: 0,
				frozenIncome: 0,
				frozenExpenditure: 0,
				shopId: '',
				//搜索
				search: {
					navThmen: 'line',
					navPlaceholder: 'Donate for',
					navType: 'navBackTitle',
					title: this.$t('storeManagement.storeData')
				},
				itemList: [{
						head:  this.$t('storeManagement.SalesData'),
						type: 0,
						num: [],

						amout: 1022,
						open: true
					},
					{
						head:  this.$t('storeManagement.UserData'),
						type: 0,
						num: [],
						amout: 1031,

						open: false
					},
					{
						head:  this.$t('storeManagement.PurchaseData') ,
						type: 0,
						num: [],
						amout: 1100,

						open: false
					}
				],
				itemStyle: {
					marginTop: '32rpx'
				},
				headStyle: {
					height: '152rpx',
					background: '#FFFFFF',
					boxShadow: '6rpx 10rpx 44rpx 0rpx rgba(0,0,0,0.1)',
					borderRadius: '32rpx 32rpx 32rpx 32rpx',
					opacity: 1,
					padding: '32rpx'
				},
				paramsKey: ['sales', 'user', 'purchase'], //
				imgUrl1: require('static/images/logistics1.png'),
				imgUrl2: require('static/images/logistics2.png'),
				imgUrl3: require('static/images/logistics3.png'),
				imgUrl4: require('static/images/logistics4.png')
			};
		},
		onLoad(type) {
			this.getStoreList()
		},
		onReady() {
			let _self = this
		
			this.$u.get('/app/shop/balance').then(res => {
				this.totalBalance = res.data ? Number(res.data.totalBalance).toFixed(2) : 0
				this.frozenIncome = res.data ? Number(res.data.freezeIn).toFixed(2) : 0
				this.frozenExpenditure = res.data ? Number(res.data.freezeOut).toFixed(2) : 0
				this.shopId = res.data ? res.data.shopId : ''
				//实现自动获取宽高并赋值
				this.$nextTick(() => {
					let info = uni.createSelectorQuery().in(_self).select('.charts-box');
					info.boundingClientRect(function(data) {
						// 获取元素的各种参数
						_self.cWidth = data.width;
						_self.cHeight = data.height;
						_self.getServerData(_self.categoriesData, _self.areaData);
					}).exec()
				})
		
			})
			this.$u.get('/app/shop').then(res => {
				this.shopAvatarUrl = this.$u.file.getMedieUrl(res.data.shopAvatarUrl)
			this.$u.get('/app/shop-level/' + res.data.shopLevelId).then((res) => {
					this.cameraFill = this.$u.file.getMedieUrl(res.data.icon)
				});
				this.$u.get(`/app/shop-level/${res.data.shopLevelId}`).then(r => {
				uni.setStorageSync('purchaseMinNum', r.data.purchaseMinNum);
				uni.setStorageSync('purchaseMinAmount', r.data.purchaseMinAmount);
				uni.setStorageSync('purchaseMaxAmount', r.data.purchaseMaxAmount);
				})
				
				this.shopName = res.data ? res.data.shopName : 0
				this.shopId = res.data.id || ''
				this.shopName = res.data ? res.data.shopName : 0
				uni.setStorageSync('vuexShopId',res.data.id );
				uni.setStorageSync('vuexShopName', res.data.shopName);
		
			})
			this.$u.get('/app/shopIncomeConfig/getAdvancePaymentConfig').then(res => {
		
				uni.setStorageSync('AdvancePayment', res.data);
			})
		
		},
		methods: {
			getStoreList() {
				this.paramsKey.forEach((key, index) => {
					this.$u.get(`/app/statistics/${key}`).then((res) => {
						this.itemList[index].num = res.data
					});
				})

			},
			tap(e) {
				uChartsInstance[e.target.id].touchLegend(e);
				uChartsInstance[e.target.id].showToolTip(e);
			},
					// 修改显示数据
			changeactive1(type) {
			this.active1 = type
			let orderData
			switch (type) {
				case 0:
					orderData = {
						categories: [this.$t('user.today')],
						series: [{
								name: this.$t('storeManagement.todayOrderNum'),
								data: [this.showData.todayOrderNum]
							},
							{
								name: this.$t('storeManagement.yesterdayOrderNum'),
								data: [this.showData.yesterdayOrderNum]
							},
							{
								name: this.$t('storeManagement.totalOrderNum'),
								data: [this.showData.totalOrderNum]
							}
						]
					};
					this.categoriesData = orderData.categories,
						this.areaData = orderData.series
					this.drawCharts('NkCVjWoUPAMZMRIayjbyAOTJEuVkBZUE', orderData);
					break;
				case 1:
					orderData = {
						categories: [this.$t('user.today')],
						series: [{
								name: this.$t('storeManagement.todayTaskNum'),
								data: [this.showData.todayTaskNum]
							},
							{
								name: this.$t('storeManagement.yesterdayTaskNum'),
								data: [this.showData.yesterdayTaskNum]
							},
							{
								name: this.$t('storeManagement.totalTaskNum'),
								data: [this.showData.totalTaskNum]
							}
						]
					};
					this.categoriesData = orderData.categories,
						this.areaData = orderData.series
					this.drawCharts('NkCVjWoUPAMZMRIayjbyAOTJEuVkBZUE', orderData);
					break;
				case 2:
					orderData = {
						categories: [this.$t('user.today')],
						series: [{
								name: this.$t('storeManagement.todayGoodsNum'),
								data: [this.showData.todayGoodsNum]
							},
							{
								name: this.$t('storeManagement.yesterdayGoodsNum'),
								data: [this.showData.yesterdayGoodsNum]
							},
							{
								name: this.$t('storeManagement.totalGoodsNum'),
								data: [this.showData.totalGoodsNum]
							}
						]
					};
					this.categoriesData = orderData.categories,
						this.areaData = orderData.series
					this.drawCharts('NkCVjWoUPAMZMRIayjbyAOTJEuVkBZUE', orderData);
					break;
				case 3:
					orderData = {
						categories: [this.$t('user.today')],
						series: [{
								name: this.$t('storeManagement.browseUserNum'),
								data: [this.showData.browseUserNum]
							},
							{
								name: this.$t('storeManagement.orderUserNum'),
								data: [Number(this.showData.orderUserNum)]
							},
							{
								name: this.$t('storeManagement.TransactionConversionRate'),
								data: [Number(this.showData.browseUserNum) ? (Number(this.showData.orderUserNum) / Number(this
									.showData.browseUserNum)).toFixed(2) : 0]
							}
						]
					};
					this.categoriesData = orderData.categories,
						this.areaData = orderData.series
					this.drawCharts('NkCVjWoUPAMZMRIayjbyAOTJEuVkBZUE', orderData);
					break;
				default:
					break;
			}
		},
		getServerData() {
			this.$u.get(`/app/shopIndex/data/${this.shopId}`).then((res) => {
				console.log('hauhaudh');
				this.showData = res.data
				let orderData = {
					categories: [this.$t('user.today')],
					series: [{
							name: this.$t('storeManagement.todayOrderNum'),
							data: [this.showData.todayOrderNum]
						},
						{
							name: this.$t('storeManagement.yesterdayOrderNum'),
							data: [this.showData.yesterdayOrderNum]
						},
						{
							name: this.$t('storeManagement.totalOrderNum'),
							data: [this.showData.totalOrderNum]
						}
					]
				};
				this.categoriesData = orderData.categories,
					this.areaData = orderData.series
				this.drawCharts('NkCVjWoUPAMZMRIayjbyAOTJEuVkBZUE', orderData);
			});
		},
	
		drawCharts(id, data) {
			const ctx = uni.createCanvasContext(id, this);
			uChartsInstance[id] = new uCharts({
				type: "column",
				context: ctx,
				width: this.cWidth,
				height: this.cHeight,
				categories: data.categories,
				series: data.series,
				animation: true,
				timing: "easeOut",
				duration: 1000,
				rotate: false,
				rotateLock: false,
				background: "#FFFFFF",
				color: ["#7C46FF", "#F38B3B", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
				padding: [15, 15, 0, 5],
				fontSize: 13,
				fontColor: "#666666",
				dataLabel: true,
				dataPointShape: true,
				dataPointShapeType: "solid",
				touchMoveLimit: 60,
				enableScroll: false,
				enableMarkLine: false,
				legend: {
					show: true,
					position: "bottom",
					float: "center",
					padding: 5,
					margin: 5,
					backgroundColor: "rgba(0,0,0,0)",
					borderColor: "rgba(0,0,0,0)",
					borderWidth: 0,
					fontSize: 13,
					fontColor: "#666666",
					lineHeight: 11,
					hiddenColor: "#CECECE",
					itemGap: 10
				},
				xAxis: {
					disableGrid: true,
					disabled: false,
					axisLine: true,
					axisLineColor: "#CCCCCC",
					calibration: false,
					fontColor: "#666666",
					fontSize: 13,
					lineHeight: 20,
					marginTop: 0,
					rotateLabel: false,
					rotateAngle: 45,
					itemCount: 5,
					boundaryGap: "center",
					splitNumber: 5,
					gridColor: "#CCCCCC",
					gridType: "solid",
					dashLength: 4,
					gridEval: 1,
					scrollShow: false,
					scrollAlign: "left",
					scrollColor: "#A6A6A6",
					scrollBackgroundColor: "#EFEBEF",
					title: "",
					titleFontSize: 13,
					titleOffsetY: 0,
					titleOffsetX: 0,
					titleFontColor: "#666666",
					formatter: ""
				},
				yAxis: {
					data: [{
						min: 0
					}],
					disabled: false,
					disableGrid: true,
					splitNumber: 5,
					gridType: "solid",
					dashLength: 8,
					gridColor: "#CCCCCC",
					padding: 10,
					showTitle: false
				},
				extra: {
					column: {
						type: "group",
						width: 30,
						activeBgColor: "#000000",
						activeBgOpacity: 0.08,
						seriesGap: 2,
						categoryGap: 3,
						barBorderCircle: false,
						linearType: "none",
						linearOpacity: 1,
						colorStop: 0,
						meterBorder: 1,
						meterFillColor: "#FFFFFF",
						labelPosition: "outside"
					},
					tooltip: {
						showBox: true,
						showArrow: true,
						showCategory: false,
						borderWidth: 0,
						borderRadius: 0,
						borderColor: "#000000",
						borderOpacity: 0.7,
						bgColor: "#000000",
						bgOpacity: 0.7,
						gridType: "solid",
						dashLength: 4,
						gridColor: "#CCCCCC",
						boxPadding: 3,
						fontSize: 13,
						lineHeight: 20,
						fontColor: "#FFFFFF",
						legendShow: true,
						legendShape: "auto",
						splitLine: true,
						horizentalLine: false,
						xAxisLabel: false,
						yAxisLabel: false,
						labelBgColor: "#FFFFFF",
						labelBgOpacity: 0.7,
						labelFontColor: "#666666"
					},
					markLine: {
						type: "solid",
						dashLength: 4,
						data: []
					}
				}
			});
		},
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕

		
	};
</script>

<style lang="scss">
	/deep/.u-collapse-body {
		max-height: 1360rpx !important;
	}

	.modify-page {
		.collapseHead {
			color: #02010e;
			font-size: 32rpx;

			.collapseType {
				font-size: 28rpx;
				color: #91909a;
				margin: 12rpx 0;
			}
		}

		.collapseContent {
			padding: 32rpx;

			.dataIndicatorBox {
				display: flex;
				flex-wrap: wrap;

				.dataIndicator {
					height: 156rpx;
					margin-right: 32rpx;
					width: 280rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					margin-bottom: 32rpx;
					flex-wrap: wrap;
					border-radius: 24rpx;

					.dataIndicatorNum {
						font-size: 48rpx;
						font-family: Avenir-Heavy-Regular, Avenir-Heavy;
						font-weight: 400;
						color: #ffffff;
					}

					.dataIndicatorName {
						font-size: 32rpx;
						width: 100%;
						text-align: center;
						font-family: Avenir-Medium-Regular, Avenir-Medium;
						font-weight: 400;
						color: #ffffff;
					}
				}
			}

			.statisticsBox {
				display: flex;
				flex-wrap: wrap;

				.statistics {
					height: 310rpx;
					margin-right: 32rpx;
					width: 280rpx;
					padding-left: 40rpx;
					margin-bottom: 32rpx;
					flex-wrap: wrap;
					border-radius: 32rpx;
					border: 2rpx solid #ececec;

					.statisticsIcon {
						margin: 56rpx 0;
					}

					.statisticsNum {
						font-size: 48rpx;
						font-family: Avenir-Heavy-Regular, Avenir-Heavy;
						font-weight: 400;
						margin: 0rpx 0 14rpx 0;
						width: 100%;
						color: #02010e;
					}

					.statisticsName {
						font-size: 24rpx;
						width: 100%;

						font-family: Avenir-Medium-Regular, Avenir-Medium;
						font-weight: 400;
						color: #91909a;
					}
				}
			}

			.logisticsBox {
				height: 152rpx;
				border-radius: 32rpx 32rpx 32rpx 32rpx;
				opacity: 1;
				border: 2rpx solid #ececec;
				margin: 32rpx 0;
				display: flex;
				align-items: center;
				padding: 0 32rpx;
				justify-content: space-between;

				.logisticsBoxLfet {
					display: flex;
					align-items: end;

					.logisticsBoxLfet_right {
						margin: auto 0;
						margin-left: 22rpx;

						.logisticsBoxLfet_right_title {
							font-size: 28rpx;
							font-family: Avenir-Heavy-Regular, Avenir-Heavy;
							font-weight: 400;
							color: #02010e;
							margin-bottom: 14rpx;
						}
					}
				}

				.logisticsBoxRight {
					font-size: 28rpx;
					font-family: Avenir-Heavy-Regular, Avenir-Heavy;
					font-weight: 400;
					color: #4953ed;
				}
			}
		}

		.bootom {
			position: absolute;
			bottom: 60rpx;
			width: 90%;
			left: 50%;
			transform: translateX(-50%);

			.u-btn {
				padding: 30rpx;
			}
		}
	}
	.function-box {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-evenly;
	
		.active {
			background-color: #2934D0 !important;
			color: #FFFFFF !important;
		}
	
		.custom-style {
			width: 300rpx;
			height: 64rpx;
			background: #F5F6F8;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			margin-top: 44rpx;
			text-align: center;
			line-height: 64rpx;
			font-size: 24rpx;
			font-family: San Francisco Display-Regular, San Francisco Display;
			font-weight: 400;
			color: #C9C9C9;
	
	
		}
	
	}
	.charts-box {
		width: 100%;
		height: 500rpx;
		flex: 1;
	
		.charts {
			height: 100%;
			width: 100%;
		}
	}
</style>